<script setup>
// data  它内部的数据都是响应式(数据有更新，页面上使用该数据的地方也会更新)的
// reactive:作用：定义响应式数据  注意点：它内部的值一定要是一个复杂数据类型
// 用法：1：导入  import {reactive} from 'vue' 2:定义  const xxx=reactive(复杂数据类型的数据:对象，数组，function..{a:1})   3:访问：xxx.a
import { reactive } from 'vue'

let num = 1
const state = reactive({
  num: 1
})
const add = () => {
  num++
  console.log(num)
}
const add2 = () => {
  state.num++
}
</script>

<template>
  <div class="app-page">{{ num }}</div>
  <button @click="add">点击++</button>
  <hr />
  <div class="app-page">{{ state.num }}</div>
  <button @click="add2">点击++</button>
</template>

<style scoped></style>
